<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <nav class="light-blue lighten-1" role="navigation">

            <ul id="nav-mobile" class="side-nav">
              <li><a href="#">Preview Mission</a></li>
              <li class="divider"></li>
              <li><a href="#">Code View</a></li>
              <li class="divider"></li>
              <li><a href="#">Save</a></li>
              <li class="divider"></li>
              <li><a href="#">Share</a></li>
              <li class="divider"></li>
              <li><a href="#">View All</a></li>
            </ul>
            <a href="#" data-activates="nav-mobile" class="right button-collapse show-on-large"><i class="material-icons">menu</i></a>
          </div>
        </nav>
        
        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <script>
        (function($){
          $(function(){

            $('.button-collapse').sideNav({
              edge: 'right' // Choose the horizontal origin
            });

          }); // end of document ready
        })(jQuery); // end of jQuery name space
        </script>
    </body>
  </html>